<template>
	<div class="title_tab">
		<ul class="my_ul" ref="myUl" style="height: 40px;">
			<li v-for="(val,index) in titleList" :key="index" @click="changeTitle(index,$event)">{{val}}</li>
		</ul>
		<span class="underline" :style="underLinStyle"></span>
	</div>
</template>

<script>
	export default {
		props:['titleList'],
		data() {
			return{
				currentIndex:0,
				underLinStyle:{left: `0px`}
			}
		},
		mounted() {
			// console.log(this.titleList);
		},
		methods:{
			changeTitle(index,e){
				// console.log(index);
				this.currentIndex = index;
				const liList = this.$refs.myUl.children;
				let width = 0;
				for (let val of liList) {
					if(val == e.target){
						break
					}
					width += val.offsetWidth
				}
				this.underLinStyle.left = `${width}px`;
				this.$emit('tab-changed',index)
			}
		}
	}
</script>

<style>
	.title_tab {
		width: 100%;
		position: relative;
		line-height: 16px;
	}
	
	.title_tab li {
		width: 165px;
		height: 38px;
		text-align: center;
		list-style: none;
		float: left;
		font-size: 16px;
		display: inline-block;
		line-height: 40px;
		border-bottom: 1px solid #e5e5e5;
		overflow: visible;
		cursor: pointer;
	}
	
	.title_tab .li_choosed {
		color: #3f9f5f;
	}
	
</style>